<template>
  <div class="index">
    <Header></Header>
    <!--搜索-->
    <div class="header-img-contain">
      <div class="flex-column-centers">
        <div class="search-title">
          <router-link to="#" class="active">找工作</router-link>
          <router-link to="#">找人才</router-link>
        </div>

        <div class="search-contain">
          <div class="job-search-bg search-input-contain">
            <input
              type="text"
              v-model="search"
              placeholder="请输入您要寻找的人才信息！"
            />
          </div>
          <div class="search-button-contain mt10">
            <button class="pointer" title="搜索" @click="goToSearch('/job')">
              <i class="search-button-icons"></i>
            </button>
          </div>
        </div>

        <!--<div class="hot-tag">
          <em>热门关键字：</em>
          <span v-for="(item, index) in hotKeys" :key="index">{{ item }}</span>
        </div>-->
      </div>
    </div>
    <div class="wrap">
      <!-- <div class="crumbs flex"><div class="p">首页</div><div class="p">>{{title}}</div></div> -->
      <div class="service-title">
        <h2>咨询中心</h2>
        <p>consulting center</p>
      </div>
      <div class="s1">
        请完善以下信息，我们的顾问会在1个工作日内与您联系，为您安排产品演示服务。(仅对企业客户开放)
      </div>

      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="knowProducts">
          <div class="el-labela">
              <p class="d">01.想了解的产品（多选）</p>
          </div>
          <el-checkbox-group v-model="ruleForm.knowProducts">
            <el-checkbox label="招聘人才库" name="knowProducts"></el-checkbox>
            <el-checkbox label="企业大学" name="knowProducts"></el-checkbox>
            <el-checkbox label="行业人才报告" name="knowProducts"></el-checkbox>
            <el-checkbox label="服务联盟咨询" name="knowProducts"></el-checkbox>
            <!-- <el-checkbox label="绩效管理咨询" name="knowProducts"></el-checkbox> -->
            <el-checkbox label="政策申报咨询" name="knowProducts"></el-checkbox>
            <!-- <el-checkbox label="劳务法律咨询" name="knowProducts"></el-checkbox> -->
          </el-checkbox-group>
        </el-form-item>
        <el-form-item prop="username">
          <div class="el-labela">
              <p class="d">02.姓名</p>
          </div>
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <div class="el-labela">
              <p class="d">03.手机</p>
          </div>
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item prop="companyName">
          <div class="el-labela">
              <p class="d">04.公司名称</p>
          </div>
          <el-input v-model="ruleForm.companyName"></el-input>
        </el-form-item>
        <el-form-item prop="position">
          <div class="el-labela">
              <p class="d">05.职务</p>
          </div>
          <el-input v-model="ruleForm.position"></el-input>
        </el-form-item>
        <el-form-item prop="contentMsg">
          <div class="el-labela">
              <p>06.备注</p>
          </div>
          <el-input v-model="ruleForm.contentMsg"></el-input>
        </el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      </el-form>
    </div>

    <Footer></Footer>
  </div>
</template>
<script>
import Header from "@/views/components/header/header";
import Footer from "@/views/components/header/footer";
import { saveMessage } from "@/api/service/service";
import { Notification, MessageBox, Message } from 'element-ui'
export default {
  name: "bbs",
  data: function () {
    return {
      hotKeys: [
        "销售",
        "java",
        "人事会计",
        "UI平面设计",
        "行政web",
        "前端",
        "房地产",
      ],
      search: "",
      ruleForm: {
          companyName:"",
          knowProducts: [],
          phone:"",
          position:"",
          username: "",
          contentMsg: ''
      },
      datas:{
        companyName:"",                  //公司名称
        knowProducts:"",       //想了解的产品
        phone:'',                    //手机
        position:"",                        //职务
        username:'',                        //姓名
        contentMsg:""                   //备注信息
      },
      rules: {
          username: [
            { required: true, message: '请输入姓名', trigger: 'change' },
          ],
          knowProducts: [
            {type: 'array', required: true, message: '请至少选择一个产品', trigger: 'change' }
          ],
          companyName: [
            { required: true, message: '请输入公司名称', trigger: 'change' }
          ],
          phone: [
            { required: true, message: '请输入电话', trigger: 'change' }
          ],
          position: [
            { required: true, message: '请输入职务', trigger: 'change' }
          ],
          contentMsg: [
            { required: true, message: '请输入备注信息', trigger: 'change' }
          ],
        }
    };
  },
  mounted() {
    if (this.$route.meta) {
      this.title = this.$route.meta.title;
    }

  },
  watch: {},
  components: { Header, Footer },
  methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.datas.companyName = this.ruleForm.companyName;
            this.datas.phone = this.ruleForm.phone;
            this.datas.position = this.ruleForm.position;
            this.datas.username = this.ruleForm.username;
            this.datas.contentMsg = this.ruleForm.contentMsg;
            for(let i=0; i< this.ruleForm.knowProducts.length; i++){
              if((i+1)==this.ruleForm.knowProducts.length){
                this.datas.knowProducts = this.datas.knowProducts+this.ruleForm.knowProducts[i]
              }else{
                this.datas.knowProducts = this.datas.knowProducts+this.ruleForm.knowProducts[i]+','
              }
            }
            this.saveMessageapi(this.datas)
          } else {
            return false;
          }
        });
      },
      saveMessageapi(data){
        saveMessage(data).then(res=>{
          if(res.resp_code === 0){
            this.ruleForm.companyName = "";
            this.ruleForm.phone = "";
            this.ruleForm.position = "";
            this.ruleForm.username = "";
            this.ruleForm.contentMsg = "";
            this.ruleForm.knowProducts = []
            Message({
              message: "报名成功",
              type: 'success'
            })
          }
        })
      }
  },
};
</script>
<style scoped>
.index {
  background: #fff;
}
.header {
  position: absolute;
  width: 100%;
  top: 0;
}
.header .top {
  background: rgba(0, 0, 0, 0.52);
}
.header .nav {
  background: rgba(0, 0, 0, 0.45);
}
.service-title {
  padding: 36px 0;
  text-align: center;
  color: #5e9f8e;
}
.service-title h2 {
  font-size: 36px;
  line-height: 52px;
}
.service-title p {
  font-size: 14px;
  line-height: 24px;
  text-transform: uppercase;
}
.s1 {
  font-size: 16px;
  color: #111;
  text-align: center;
  padding: 10px 0 60px 0;
}
.aa{
        content: '*';
    color: #ff4949;
    margin-right: 4px;
    background: #3DABC4;
}
.el-form{
    margin: 10px;
}
.el-labela p{
    display: inline-block;
    position: relative;
    padding: 32px 0;
    color: #111111;
    font-size: 16px;
}
.el-labela p.d::after{
    position: absolute;
    content: "*";
    color: #ff4949;
    font-weight: bold;
    right: -12px;
}
.el-checkbox{
    display: block;
}
.el-button{
    width: 260px;
    height: 40px;
    display: block;
    border-radius: 20px;
    margin: 50px auto;
}
</style>
<style lang="scss" scoped>
.header-img-contain {
  width: 100%;
  min-width: 1200px;
  height: 306px;
  background: url("../../assets/image/enterprise/jxsx-bg.png") no-repeat;
  background-size: 100% 100%;

  .flex-column-centers {
    width: 540+86px;
    position: absolute;
    top: 140px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    .search-title {
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 5px;
      opacity: 0.78;
      a {
        margin-left: 30px;
        &.active {
          font-size: 24px;
          color: #f5f5f5;
        }
        &:last-child {
          margin-left: 15px;
        }
      }
    }

    .search-contain {
      overflow: hidden;
      width: 539+88px;
      .job-search-bg {
        float: left;
        width: 539px;
        height: 62px;
        background: url("../../assets/image/search-bg-1.png") no-repeat;
        background-size: 100%;

        input {
          outline: none;
          width: 539px;
          height: 48px;
          margin-top: 12px;
          margin-left: 2px;
          font-size: 18px;
          border: 0;
          background: none;
          font-weight: 400;
          color: #fff;
          padding-left: 25px;
          border-radius: 50px;

          &::-webkit-input-placeholder {
            /* WebKit, Blink, Edge */
            color: #e4e4e4;
          }
          &:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #e4e4e4;
          }
          &::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #e4e4e4;
          }
          &:-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: #e4e4e4;
          }
        }
      }
      .search-button-contain {
        float: right;
        width: 88px;
        height: 52px;
        background: url("../../assets/image/enterprise/search-button-bg.png")
          no-repeat;
        background-size: 100%;

        button {
          background: transparent;
          width: 88px;
          height: 52px;
          border-width: 0px !important;
          outline: none;
          .search-button-icons {
            margin-left: 25px;
            display: block;
            width: 27px;
            height: 28px;
            background: url("../../assets/image/enterprise/search-button-icons.png")
              no-repeat;
          }
        }
      }
    }

    .hot-tag {
      width: 539+88px;
      margin-top: 20px;
      padding-left: 30px;
      color: #f5f5f5;
      em {
        font-style: normal;
      }
      span {
        display: inline-block;
        margin-right: 10px;
        cursor: pointer;
        font-size: 14px;
      }
    }
  }
}
.el-checkbox__input.is-checked >>> .el-checkbox__inner{
    background-color: #3DABC4;
        border-color: #3DABC4;
}
</style>
